<template>
	<view class="content">
		<u-navbar fixed :leftIcon="null" title="首页" fixed></u-navbar>
		<view class="top-content">
			<view class="user-info">
				<view class="avatar-content">
					<u--image width="100rpx" height="100rpx"
						src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
						shape="circle"></u--image>
				</view>
				<view class="right-content">
					<view class="name-content">{{ getUserInfo().nickName || "夏琳恒"  }} <span class="post">心内科·主任医师</span>
					</view>
					<view class="info-content">浙江省人民医院（天府院区）</view>
				</view>
			</view>
		</view>

		<view class="kuai-jie-content">
			<u-grid :border="false" col="4">
				<u-grid-item @click="goto(1)">
					<u-icon :customStyle="{paddingTop:32+'rpx'}" name="chat" :size="70"></u-icon>
					<text class="grid-text">上报</text>
				</u-grid-item>
				<u-grid-item @click="goto(2)">
					<u-icon :customStyle="{paddingTop:32+'rpx'}" name="chat" :size="70"></u-icon>
					<text class="grid-text">我的上报</text>
				</u-grid-item>
				<u-grid-item @click="goto(3)">
					<u-icon :customStyle="{paddingTop:32+'rpx'}" name="chat" :size="70"></u-icon>
					<text class="grid-text">上报审批</text>
				</u-grid-item>
				<u-grid-item @click="goto(4)">
					<u-icon :customStyle="{paddingTop:32+'rpx'}" name="chat" :size="70"></u-icon>
					<text class="grid-text">分析审批</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="schedule-content">
			<view class="title-content">
				待办事项
			</view>
			<view class="list-content">
				<view class="list-item" v-for="(item, index) in listData" :key="item.id" @click="toCheck(item)">
					<view class="item-content">
						<view class="left-content">
							<u-tag text="待审批" type="warning" shape="circle"></u-tag>
						</view>
						<view class="right-content">
							<view>
								<view class="title">
									{{ item.title }}
								</view>
								<view class="item-date">
									{{ moment(item.create_time).format('MM月DD日 HH:mm') }}
								</view>
							</view>
						</view>
					</view>
					<view class="bottom-btn">
						<u-button type="primary" size="small" shape="circle" text="审批"></u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="message-content">
			<view class="title-content">
				<view>消息通知</view>
				<view class="more-btn" @click="moreMsg">更多消息<u-icon name="arrow-right" color="#bbb" size="18"></u-icon>
				</view>
			</view>
			<view class="list-content">
				<view class="list-item" v-for="(item, index) in listData" :key="item.id" @click="toCheck(item)">
					<view class="item-content">
						<view class="left-content">
							<u-icon name="bell" color="#bbb" size="18"></u-icon>
						</view>
						<view class="right-content">
							<view>
								<view class="title">
									{{ item.title }}
								</view>

							</view>
						</view>
					</view>
					<view class="item-date">
						{{ moment(item.create_time).format('MM-DD') }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPicture
	} from '@/api/home'
	import moment from 'moment'
	export default {
		data() {
			return {
				listData: [{
					title: '手术事件上报待审批',
					info: '',
					date: '2024-3-18 11:00:00',
				}, {
					title: '手术事件上报待审批',
					info: '',
					date: '2024-3-18 11:00:00',
				}, {
					title: '手术事件上报待审批',
					info: '',
					date: '2024-3-18 11:00:00',
				}, {
					title: '手术事件上报待审批',
					info: '',
					date: '2024-3-18 11:00:00',
				}],
			}
		},
		onShow() {

		},

		onLoad() {

		},
		methods: {
			moment,
			getUserInfo() {
				const info = uni.getStorageSync('userInfo');
				const userInfo = info.user || {};
				return userInfo;
			},
			//获取消息列表
			getListData(page) {
				if (page === 1) {
					this.page = 1
					this.listData = []
				}
				getMsgList(userId, {
					page,
					page_size: 20
				}).then(res => {
					console.log(res)
					this.listData = [...this.listData, ...res.data.data]
					this.total = res.data.total
				})
			},
			goto(flag) {
				if (flag === 1) {
					uni.navigateTo({
						url: "/pages/home/components/report"
					})
				} else if (flag === 2) {
					uni.navigateTo({
						url: "/pages/home/components/reportList"
					})
				} else if (flag === 3) {
					uni.navigateTo({
						url: "/pages/home/components/approvalList"
					})
				} else {
					uni.navigateTo({
						url: "/pages/home/components/analyseList"
					})
				}
			},
			//去查看
			toCheck(data) {
				uni.navigateTo({
					url: "/pages/message/detail?id=" + data.id
				})
			},
			//更多消息
			moreMsg() {
				uni.switchTab({
					url: "/pages/message/index"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		color: #000;
		padding-top: 120rpx;
		background: #f3f4f6;

		.top-content {
			background-color: aquamarine;
			padding: 24rpx;

			.user-info {
				display: flex;
				align-items: center;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 12rpx;

				.right-content {
					margin-left: 24rpx;
					font-size: 28rpx;

					.name-content {
						font-weight: 600;

						.post {
							margin-left: 24rpx;
							color: #333;
							font-size: 24rpx;
							font-weight: 500;
						}
					}


					.info-content {
						margin-top: 12rpx;
					}
				}
			}
		}

		.kuai-jie-content {
			background-color: #fff;
			padding-bottom: 24rpx;
			margin: 24rpx;
			border-radius: 8rpx;
		}

		.schedule-content,
		.message-content {
			padding: 24rpx;
			background-color: #fff;
			margin: 24rpx;
			border-radius: 8rpx;

			.title-content {
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 24rpx;
			}

			.list-content {
				.list-item {
					margin: 24rpx 0;
					border-bottom: 1px solid #e8e8e8;
					padding: 12rpx;
					display: flex;
					justify-content: space-between;

					.item-content {
						display: flex;

						.right-content {
							margin-left: 20rpx;

							.title {
								font-size: 28rpx;
								font-color: #101010;
							}

							.item-date {
								margin-top: 12rpx;
								font-size: 28rpx;
								color: #bbb;
							}
						}
					}

					.bottom-btn {
						width: 140rpx;
						margin-left: 24rpx;
					}
				}

				.list-item:last-child {
					border-bottom: none;
				}
			}
		}

		.message-content {
			.title-content {
				display: flex;
				justify-content: space-between;

				.more-btn {
					display: flex;
					font-size: 30rpx;
					font-weight: 500;
					color: #bbb;
				}

			}

			.item-date {
				color: #bbb;
			}
		}
	}
</style>